<template>
  <div>
    <nav-bar :title="chatObj.title"
             left-arrow
             rightBar
             :onClickLeft="onClickLeft"
             :onClickRight="onClickRight"
    />
    <div class="content-body">
      <div class="msg-view-area" @click="onViewAreaClick">

      </div>
      <van-row class="msg-bar">
        <van-col span="3">
          <van-icon class="msg-bar-icon" class-prefix="iconfont" name="yuyin"/>
        </van-col>
        <van-col span="15">
          <div contenteditable
               ref="msginput"
               v-html="message"
               id="editArea"
               class="msg-input"
               @click="onMsgFocus"
               @input="onMsgInput"
               @keypress.enter="onMsgEnterInput"
            ></div>
        </van-col>
        <van-col span="3">
          <van-icon
            class="msg-bar-icon"
            class-prefix="iconfont"
            name="biaoqing"
            @click="addEmoji"
          />
        </van-col>
        <van-col span="3">
          <van-button
            id="sendBtn"
            class="msg-bar-button"
            size="mini"
            type="primary"
            @click="onSendMsg"
            v-show="showSend">发送</van-button>
          <van-icon class="msg-bar-icon" name="add-o" v-show="!showSend"/>
        </van-col>
      </van-row>
      <div class="msg-bar-menu" v-show="false"></div>
    </div>
  </div>
</template>

<script>
  import { Toast } from "vant";
  import emojiData from "../../static/emoji/emojiData.js"
  import {RangeUtil} from "@/static/utils/range.util.js"
  import NavBar from "@/components/NavBar"
  import EditArea from "./part/EditArea2"
  export default {
    name: "ChatRoom",
    components: {
      NavBar,
      EditArea
    },
    data () {
      return {
        chatObj: {},
        message: "",
        showSend: false
      }
    },
    mounted() {
      this.chatObj = this.$route.params;
      this.onMsgFocus()
    },
    methods: {
      onClickLeft() {
        this.$router.push("/");
      },
      onClickRight() {
        this.$router.push("/");
      },
      onMsgInput(event) {
        let message = event.target.innerHTML
        if(message != '') {
          this.showSend = true;
        }else {
          this.showSend = false;
        }
      },
      onMsgEnterInput(e) {
        e.preventDefault();
        RangeUtil.insertHtmlAtCaret('<br/>')  // 在当前光标插入文本
      },
      onMsgFocus() {
        document.getElementById("editArea").focus()
        document.getElementById("editArea").blur()
      },
      onSendMsg() {
        this.showSend = false;
        console.log(this.$refs.msginput.innerHTML)
        Toast(this.$refs.msginput.innerHTML);
        this.$refs.msginput.innerHTML = "";
      },
      addEmoji() {
        this.showSend = true;
        let rand = Math.random();
        let num = 0 + Math.round(rand * 19);
        let emoji = emojiData.imgArr[0].emojiList[0][num];
        let emojiPath = emojiData.imgArr[0].emojiPath + emoji.url
        //let imgStr = '<img style="width:20px;height:20px;" src="' + emojiPath + '">&nbsp;'
        let imgStr = '<img style="width:20px;height:20px;" src="' + emojiPath + '">'
        RangeUtil.insertHtmlAtCaret(imgStr)
        var ele = document.getElementById('editArea');
        console.log(ele.scrollHeight)
        ele.scrollTop = ele.scrollHeight;
      },
      onViewAreaClick() {
        console.log("1111")
        this.showSend = false
      }
    }

  }
</script>

<style scoped>
  .content-body {
    margin-top: 46px;
  }
  .msg-view-area {
    height: 100%;
  }
  .msg-bar {
    min-height: 48px;
    background-color: #F8F8F8;
    bottom: 0;
    position: fixed;
    left: 0;
    display: flex;
    box-sizing: content-box;
    width: 100%;
  }
  .msg-bar-active{
    min-height: 48px;
    background-color: #F8F8F8;
    bottom: 34%;
    position: fixed;
    left: 0;
    display: flex;
    box-sizing: content-box;
    width: 100%;
  }
  .msg-bar-menu {
    bottom: 0;
    position: fixed;
    left: 0;
    display: flex;
    width: 100%;
    height: 34%;
    background-color: white;
  }
  .msg-input {
    line-height: 32px;
    max-height: 78px;
    overflow-x: hidden; /*x轴禁止滚动*/
    overflow-y: scroll;/*y轴滚动*/
    margin: 6px 0;
    padding: 2px;
    background-color: white;
    font-size: 16px;
  }
  .msg-input::-webkit-scrollbar {
    display: none;/*隐藏滚动条*/
  }
  .msg-bar-button {
    width: 42px;
    height: 30px;
    padding: 0 7px;
    font-size: 12px;
    bottom: 10px;
    position: fixed;
    text-align: center;
    display: flex;
  }
  .msg-bar-icon {
    padding: 0 6px;
    text-align: center;
    font-size: 30px;
    line-height: 48px;
    color: #616161;
    bottom: 0;
    position: fixed;
    display: flex;
    box-sizing: content-box;
  }
</style>